<template>
  <div>
    <!-- 头部 -->
    <myDivider name="发票详情"></myDivider>
    <el-page-header @back="$router.push('/invoice/invoiceList')">
    </el-page-header>

    <!-- form表单 -->
    <el-form :model="ruleForm" ref="ruleForm" label-width="120px" label-position="left" style="margin-left: 20px">
      <el-row style="margin: 20px 0;">
        <el-col :span="12">
          <div style="display: flex;align-items: center;">
            <i class="el-icon-user-solid" style="transform: scale(1.5);margin-right: 15px;"></i>
            <div>购买方信息</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="display: flex;align-items: center;">
            <i class="el-icon-user-solid" style="transform: scale(1.5);margin-right: 15px;"></i>
            <div>销售方信息</div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="名称：" prop="buyerInformation.name">
            <el-input size="medium" style="width: 350px" disabled v-model="ruleForm.buyerInformation.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称：" prop="sellerInformation.name">
            <el-input size="medium" style="width: 350px" disabled v-model="ruleForm.sellerInformation.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="纳税人识别号：">
            <el-input size="medium" style="width: 350px" disabled
              v-model="ruleForm.buyerInformation.taxpayerId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纳税人识别号：">
            <el-input size="medium" style="width: 350px" disabled
              v-model="ruleForm.sellerInformation.taxpayerId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="地址、电话：">
            <el-input size="medium" style="width: 350px" disabled
              v-model="ruleForm.buyerInformation.addressTel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址、电话：">
            <el-input size="medium" style="width: 350px" disabled
              v-model="ruleForm.sellerInformation.addressTel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="开户行及账号：">
            <el-input size="medium" style="width: 350px" disabled
              v-model="ruleForm.buyerInformation.bankInformation"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行及账号：">
            <el-input size="medium" style="width: 350px" disabled
              v-model="ruleForm.sellerInformation.bankInformation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 其他信息 -->
      <!-- 其他信息 -->
      <!-- 其他信息 -->
      <el-row style="margin: 20px 0;">
        <el-col :span="24">
          <div style="display: flex;align-items: center;">
            <i class="el-icon-s-grid" style="transform: scale(1.5);margin-right: 15px;"></i>
            <div>其他信息</div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="发票代码：">
            <el-input size="medium" style="width: 255px;" disabled v-model="ruleForm.invoiceCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票号码：" prop="number">
            <el-input size="medium" style="width: 255px;" type="number" disabled v-model="ruleForm.number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="开票日期：" prop="invoicingDate">
            <el-date-picker disabled value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="ruleForm.invoicingDate"
              style="width: 255px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格型号：">
            <el-input size="medium" style="width: 255px;" maxlength="15" disabled v-model="ruleForm.model"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="货物或应税劳务、服务名称：" prop="serviceName" label-width="220px">
        <el-input size="medium" style="width: 580px;" maxlength="50" disabled v-model="ruleForm.serviceName"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="4">
          <el-form-item label="单位：" label-width="55px">
            <el-input size="medium" style="width: 120px;" disabled maxlength="5" v-model="ruleForm.unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="数量：" label-width="55px">
            <el-input size="medium" style="width: 120px;" disabled v-model="ruleForm.count"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="单价：" label-width="55px">
            <el-input size="medium" style="width: 120px;" disabled v-model="ruleForm.unitPrice"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="金额：" label-width="55px">
            <el-input size="medium" style="width: 120px;" disabled v-model="ruleForm.totalPrice"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="税率：" label-width="55px">
            <el-input size="medium" style="width: 120px;" disabled v-model="ruleForm.taxRate"></el-input>
            <span>%</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="税额：" label-width="55px">
            <el-input size="medium" style="width: 120px;" disabled v-model="ruleForm.taxAmount"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="金额总数：" label-width="100px">
            <el-input size="medium" style="width: 155px;" disabled v-model="ruleForm.totalPriceSummation"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="税额总数：" label-width="100px">
            <el-input size="medium" style="width: 155px;" disabled v-model="ruleForm.taxAmountSummation"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="价税合计：￥" label-width="100px">
            <el-input size="medium" style="width: 155px;" disabled v-model="ruleForm.priceTaxSummation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="收款人：" label-width="100px">
            <el-input size="medium" style="width: 155px;" disabled maxlength="10" v-model="ruleForm.payee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="复核：" label-width="100px">
            <el-input size="medium" style="width: 155px;" disabled maxlength="10"
              v-model="ruleForm.invoiceCheck"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开票人：" label-width="100px">
            <el-input size="medium" style="width: 155px;" disabled maxlength="10" v-model="ruleForm.drawer"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="关联小区：" label-width="100px" prop="residentialName">
        <el-input size="medium" style="width: 800px;" disabled maxlength="10"
          v-model="ruleForm.residentialName"></el-input>
      </el-form-item>
      <el-form-item label="备注：" label-width="100px">
        <el-input size="medium" type="textarea" :rows="5" disabled style="width: 800px;" v-model="ruleForm.notes"
          maxlength="200" show-word-limit></el-input>
      </el-form-item>


      <!-- 附件 -->
      <!-- 附件 -->
      <!-- 附件 -->
      <el-row style="margin: 20px 0;" v-if="ruleForm.imageUrl || ruleForm.annexUrl">
        <el-col :span="24">
          <div style="display: flex;align-items: center;">
            <i class="el-icon-upload" style="transform: scale(1.5);margin-right: 15px;"></i>
            <div>附件</div>
          </div>
        </el-col>
      </el-row>

      <el-form-item v-if="ruleForm.imageUrl" label="图片：" label-width="100px">
        <el-image style="width: 100px; height: 100px" :src="ruleForm.imageUrl"
          :preview-src-list="[...ruleForm.imageUrl]">
        </el-image>
      </el-form-item>
      <el-form-item v-if="ruleForm.annexUrl" label="附件：" label-width="100px">
        <div class="annexBox">
          <div class="annexList">
            <div class="el">
              <span>{{ fileName }}</span>
              <span @click="dow(ruleForm.annexUrl)">下载附件</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="经办人：" label-width="100px">
        <el-input style="width: 200px;" v-model="ruleForm.createUserName" disabled placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="归档日期：" label-width="100px">
        <el-input style="width: 200px;" v-model="ruleForm.createTimeStr" disabled placeholder=""></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {

  data() {

    return {
      ruleForm: {
        buyerInformation: {},
        sellerInformation: {}
      },
      imgUrl: '',
      imgUrlList: '',
      UploadImgId: '',//上传图片需要的id
      fileName: '',
    }
  },
  async activated() {

    let res = await this.$api.message.myInvoiceDetail(this.$route.query.id)
    if (res.code == 200) {
      this.ruleForm = res.data
      // 如果有些number类型的数据为0   那么设置为null
      if (this.ruleForm.count == 0) this.ruleForm.count = null
      if (this.ruleForm.unitPrice == 0) this.ruleForm.unitPrice = null
      if (this.ruleForm.totalPrice == 0) this.ruleForm.totalPrice = null
      if (this.ruleForm.taxRate == 0) this.ruleForm.taxRate = null
      if (this.ruleForm.taxAmount == 0) this.ruleForm.taxAmount = null
      if (this.ruleForm.totalPriceSummation == 0) this.ruleForm.totalPriceSummation = null
      if (this.ruleForm.taxAmountSummation == 0) this.ruleForm.taxAmountSummation = null
      if (this.ruleForm.priceTaxSummation == 0) this.ruleForm.priceTaxSummation = null
      if (this.ruleForm.annexUrl) {
        let lastIndex = this.ruleForm.annexUrl.lastIndexOf('/');
        this.fileName = this.ruleForm.annexUrl.slice(lastIndex + 1)
      }

    } else {
      this.$message.error(res.message)
    }
    this.$nextTick(() => { //清除验证
      this.$refs.ruleForm.clearValidate()
    })
  },
  methods: {
    dow(item) { //下载附件
  

      let soa_account = sessionStorage.getItem("soa_account");
      const token = sessionStorage.getItem("soa_token")
      axios({
        method: 'get',
        url: defaultUrl+`/business/invoice/downloadAnnex?filePath=${item}`,
        headers: {
          // 在这里添加自己需要的请求头
          account: soa_account,
          token: token,
        },
        responseType: 'blob'
      }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const a = document.createElement('a')
        a.href = url
        a.setAttribute('download',this.fileName)
        document.body.appendChild(a)
        a.click();
        document.body.removeChild(a)
      })
    },

  },
}
</script>

<style lang="less" scoped>
.btn {
  position: fixed;
  bottom: 10px;
  right: 70px;
}

.annexBox {
  width: 500px;

  .annexList {
    width: 100%;
    box-sizing: border-box;
    border-right: 3px solid rgb(23, 197, 255);

    .el {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          width: 300px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:nth-child(2) {
          color: rgb(23, 197, 255);
          cursor: pointer;
          margin-right: 10px;
        }
      }
    }
  }

  .annexNone {
    color: #aaa;
  }
}
</style>